<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 单曲线样式2，有坐标轴
 * @LastEditTime: 2021-11-18 13:38:54
 * @FilePath: \tianjushi-kanban\src\components\charts\InverseBar1.vue
-->
<template>
<div :style="[{ width: width, height: height,overflow:'hidden' }]">
  <div
    ref="echartref"
    :style="[{ width: width, height: height }, _resetChartStyle]"
  ></div>
</div>
  
</template>

<script>
import * as echarts from "echarts";

import { onMounted,toRefs, ref,reactive,watch,computed } from 'vue';
import { resetChartStyle, showLoading } from "@/core/tools/common";
export default {  
  
  props: {
      title: {
      type: String,
      default: "",
    },
      width: {
      type: String,
      default: "100%",
    },
     height: {
      type: String,
      default: "100%",
    },
    chartdata:{
     type: Array,
      default:   {'xData':['产品A', '产品B', '产品C', '产品D', '产品E', '产品F'],
	       'yData':[50, 60, 70, 40, 37, 55],}
    },
	unit:{
      type:String,
	  default:'%'
	},
    color: {
      type: Array,
      default: ['#39B3FF', '#47E0E0', '#7891D9', '#83D978', '#C7A530', '#FF8439'],
    },
  },
  setup: function (props, context) {
	 let chartInit = null ;
    /*监听props*/
    watch(props, (newProps, oldProps) => {
        f_echartInit(chartInit)
    }); 
	
    let state = reactive({ 
      echartref: ref(), 
    }) 

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle()
      } 
    })  
    const f_echartInit = (chartdom) =>{   
        let data_chart = props.chartdata;  
        	const data = data_chart.yData;
					const className = data_chart.xData;
					const colorList = props.color;
					const defaultData = [100, 100, 100, 100, 100, 100];
			 	  const	option = {	
					    title: {
                        text: props.title,
                        textStyle:{
                          color:'#fff',
                          fontSize:15,
                          textAlign:'center'
                        }
                      },				
						grid: {
							left: '5%',
							right: '5%',
							bottom: '0%',
							top: '15%',
							containLabel: true
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'none'
							},
							formatter: function (params) {
								return params[0].name + '<br/>' +
									"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
									// params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'
									params[0].seriesName + ' : ' + params[0].value
							}
						},
						xAxis: {
							show: false,
							type: 'value'
						},
						yAxis: [{
							type: 'category',
							inverse: true,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#fff',
									fontSize: 18
								},
							},
							splitLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLine: {
								show: false
							},
							data: className
						}, {
							type: 'category',
							inverse: true,
							axisTick: 'none',
							axisLine: 'none',
							show: true,
							axisLabel: {
								textStyle: {
									color: '#ffffff',
									fontSize: 18
								},
								formatter: function (value) {
									return value +  props.unit;
								},
							},
							data: data
						}],
						series: [{
							name: '完成率',
							type: 'bar',
							zlevel: 1,
							itemStyle: {
								normal: {
									barBorderRadius: 15,
									color: (params) => {
										return colorList[params.dataIndex]
									}
								},
							},
							barWidth: 30,
							data: data
						},
						{
							name: '背景',
							type: 'bar',
							barWidth: 30,
							barGap: '-100%',
							//	barCategoryGap: "20%", 
							data: defaultData,
							itemStyle: {
								normal: {
									color: '#1B375E',
									barBorderRadius: 15,
								}
							},
						},
						]
					}; 
      chartdom.setOption(option);
      chartdom.hideLoading(); 
    }
    //挂载
    onMounted(()=>{ 
      chartInit = echarts.init(state.echartref); 
      chartInit.showLoading(showLoading());
      f_echartInit(chartInit)
    }) 
    return {
      ...toRefs(state), 
      _resetChartStyle
    };  

  }, 
 
};
</script>

<style>
</style>